<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <script>
    function collectDefs (node, defs, treeNode) {
      if (node.nodeName === '#text') {
        return
      }
      treeNode.nodeName = node.nodeName
      var re = /^url\(#(.*)\)/i;
      var attrs = []
      var color = false

      for (var attr of node.attributes) {
        var value = attr.value
        if (attr.name === 'xlink:href') {
          var id = value.substr(1)
          defs.add(id) 
          value = (idMap) => "'#' + " + idMap[id]
        } else if (attr.name === 'id' && node.nodeName === 'mask') {
          var id = attr.value
          defs.add(id) 
          value = (idMap) => idMap[id]
        } else {
          var found = value.match(re);
          if (found) {
            var id = found[1]
            value = (idMap) => '`url(#${' + idMap[id] +'})`'
            defs.add(id)
          }
        }

        /*
        if (color && attr.name === 'fill') {
          value = () => 'color'
        }
        // xxx: it's possible id comes after color, but we didn't see it so far
        if (attr.name === 'id' && attr.value.startsWith('Color/Hair/')) {
          color = true
        }*/

        attrs.push({
          name: attr.name,
          value
        })
      }
      treeNode.attrs = attrs

      var children = []
      for (var child of node.childNodes) {
        var childNode = {}
        collectDefs(child, defs, childNode)
        if (childNode.nodeName) {
          children.push(childNode)
        }
      }
      treeNode.childNodes = children
    }

    function convertDef (node, treeNode) {
      if (node.nodeName === '#text') {
        return
      }
      treeNode.nodeName = node.nodeName
      var attrs = []
      for (var attr of node.attributes) {
        var value = attr.value
        if (attr.name === 'id') {
          var id = attr.value
          value = (idMap) => idMap[id]
        }
        attrs.push({
          name: attr.name,
          value
        })
      }
      treeNode.attrs = attrs

      var children = []
      for (var child of node.childNodes) {
        var childNode = {}
        convertDef(child, childNode)
        if (childNode.nodeName) {
          children.push(childNode)
        }
      }
      treeNode.childNodes = children
    }

    function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }

    function outputNode(node, idMap) {
      var result = `<${node.nodeName} `
      var attrs = []
      for (var attr of node.attrs) {
        var { name, value } = attr
        var nameParts = name.split('-')
        if (nameParts.length > 1) {
          name = nameParts[0] + nameParts.slice(1).map(n => capitalizeFirstLetter(n))
        }
        var nameParts2 = name.split(':')
        if (nameParts2.length > 1) {
          name = nameParts2[0] + nameParts2.slice(1).map(n => capitalizeFirstLetter(n))
        }

        if (typeof value === 'function') {
          value = value(idMap)
          attrs.push(`${name}={${value}}`)
        } else {
          if (name === 'id' && value.startsWith('Top/_Resources/')) {
            return '{this.props.children}'
          } else if (name === 'id' && value.startsWith('Facial-Hair/')) {
            return '<FacialHair />'
          } else if (name === 'id' && value.startsWith('Color/Hair/')) {
            return "<HairColor maskID={MASK}/>"
          }
          attrs.push(`${name}='${value}'`)
        }
      }
      result += attrs.join(' ') + '>'
      for (var child of node.childNodes) {
        result += outputNode(child, idMap) 
      }
      result += `</${node.nodeName}>`
      return result
    }
  
    document.addEventListener('DOMContentLoaded', () => {
      var top = document.getElementById('Top')
      var defs = new Set()
      var treeNode = {}
      collectDefs(top, defs, treeNode) 

      var defsNodes = []
      for (var id of defs) {
        var node = document.getElementById(id)
        var defTreeNode = {}
        convertDef(node, defTreeNode)
        defsNodes.push(defTreeNode)
      }

      var typeCount = {}
      var idMap = {}
      var idProps = []
      const sortedDefs = Array.from(defs)
      var newIDs = []
      sortedDefs.sort()
      for (var id of sortedDefs) {
        var parts = id.split('-')
        var type = parts[0]
        var num = parts[1]
        if (!(type in typeCount)) {
          typeCount[type] = 1
        } else {
          typeCount[type] += 1
        }
        const newID = type + typeCount[type]
        newIDs.push(newID)
        idProps.push(`  private ${newID} = uniqueId('react-${type}-')`)
        idMap[id] = newID
      }

      //console.info('$$$$$', defsNodes)
      // console.info('$$$$$', defsStr)
      // console.info(defs, treeNode)
      treeNode.childNodes.unshift({
        nodeName: 'defs',
        attrs: [],
        childNodes: defsNodes.filter(n => n.nodeName !== 'mask')
      })

      newIDs.sort()
      const dom = outputNode(treeNode, idMap)
      const output = `
import * as React from 'react'
import { uniqueId } from 'lodash'

import FacialHair from './facialHair'
import HairColor from './HairColor'

export default class FIXME extends React.Component {
  static optionValue = 'FIXME'
  ${idProps.join('\n')} 

  render () {
    const { ${newIDs.join(', ')} } = this
    return (
      ${dom}
    )
  }
}

      `
      document.getElementById('output-text').value = output
    })
  
  </script>
</head>

<body>



  <svg width="200px" height="244px" viewBox="0 0 200 244" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z" id="path-1"></path>
        <path d="M181.544255,32.3304167 C210.784209,41.4878872 232,68.7921987 232,101.051724 L232,110 L32,110 L32,101.051724 C32,68.3969699 53.7388273,40.8195914 83.5340368,32.0020332 C83.182234,33.4201865 83,34.8712315 83,36.3476251 C83,52.6289957 105.161905,65.8276544 132.5,65.8276544 C159.838095,65.8276544 182,52.6289957 182,36.3476251 C182,34.9849859 181.844766,33.6439396 181.544255,32.3304167 Z" id="path-3"></path>
        <rect id="path-5" x="0" y="0" width="264" height="280"></rect>
        <path d="M65.1802189,77.7372986 C67.3631845,76.1045334 80.4065113,75.4786511 82.757829,74.0894494 C83.4916461,73.6553857 84.0610723,73.215719 84.4997781,72.7800074 C84.938814,73.215719 85.5085703,73.6553857 86.2423874,74.0894494 C88.593375,75.4786511 101.636702,76.1045334 103.819667,77.7372986 C106.030032,79.3908276 107.643571,83.1846831 107.466966,86.15095 C107.255041,89.7101408 103.361486,98.2028927 93.6723269,99.1811016 C91.5576925,96.8281927 88.2368647,95.3104528 84.4997781,95.3104528 C80.7633517,95.3104528 77.4421938,96.8281927 75.3275594,99.1811016 C65.6387308,98.2028927 61.7451757,89.7101408 61.5332501,86.15095 C61.3566455,83.1846831 62.9701849,79.3908276 65.1802189,77.7372986 M103.141638,94.9063813 C103.142958,94.9057221 103.144609,94.905063 103.145929,94.9047334 C103.144278,94.905063 103.142958,94.9057221 103.141638,94.9063813 M65.8453747,94.9014375 C65.8493359,94.9030855 65.8565982,94.9057221 65.8618798,94.9076997 C65.8565982,94.9057221 65.8509864,94.9034151 65.8453747,94.9014375 M144.86259,55.9853335 C144.47439,50.0303878 143.277769,44.1519058 142.233986,38.2862777 C141.952739,36.7072349 140.423706,26 139.734783,26 C139.502391,35.1094058 138.701893,44.0803858 137.669664,53.1393651 C137.361018,55.8475668 137.037848,58.5564277 136.825262,61.2741874 C136.653609,63.4695546 136.959614,66.1220564 136.427819,68.2455739 C135.749129,70.9524573 132.348087,73.4783984 129.702978,74.410795 C123.102915,76.7373371 117.597802,67.1077689 111.960977,64.2911336 C104.643272,60.6347152 92.0637391,59.7639895 84.5816434,64.5297918 C76.9361472,59.7639895 64.356614,60.6347152 57.0389092,64.2911336 C51.4024147,67.1077689 45.8969708,76.7373371 39.2972383,74.410795 C36.6521296,73.4783984 33.2504268,70.9524573 32.572397,68.2455739 C32.0402723,66.1220564 32.346277,63.4695546 32.174954,61.2741874 C31.9623682,58.5564277 31.6388681,55.8475668 31.3302226,53.1393651 C30.2983232,44.0803858 29.4974953,35.1094058 29.2654335,26 C28.5761802,26 27.0468169,36.7072349 26.7658999,38.2862777 C25.7221169,44.1519058 24.5258266,50.0303878 24.1376265,55.9853335 C23.738533,62.1047422 24.2148704,68.1674622 25.4695887,74.1632765 C26.0687242,77.0277016 26.7685407,79.8756475 27.518863,82.7041478 C28.352701,85.8467429 27.198994,91.9661516 27.5723395,95.1921317 C28.2787581,101.29572 31.1542781,113.199679 34.3833375,118.45096 C35.9440605,120.989096 37.7734867,122.573742 39.816489,124.619148 C41.7825775,126.58809 42.6038717,129.640049 44.7260985,131.73687 C48.6820428,135.645092 54.4456266,137.971304 60.3656788,138.543134 C65.6773527,143.050212 74.505605,146 84.4997781,146 C94.4946114,146 103.322534,143.050212 108.634538,138.543134 C114.55393,137.971304 120.317843,135.645092 124.274118,131.73687 C126.396015,129.640049 127.217309,126.58809 129.183727,124.619148 C131.2264,122.573742 133.055826,120.989096 134.616879,118.45096 C137.845608,113.199679 140.721458,101.29572 141.427547,95.1921317 C141.800892,91.9661516 140.647185,85.8467429 141.481353,82.7041478 C142.231676,79.8756475 142.931162,77.0277016 143.530628,74.1632765 C144.784686,68.1674622 145.261353,62.1047422 144.86259,55.9853335 Z" id="path-7"></path>
        <path d="M6,28 C0.923687084,28.0709555 0,26.9937684 0,23 C1.30010922e-16,17.3439836 4.0408529,6.77808536 8,2 C9.17612094,-0.170695788 11.6189856,-1.43187215 11,3 C8.3404922,11.4766099 11.4173429,27.914487 6,28 Z M120,28 C114.582657,27.914487 117.659508,11.4766099 115,3 C114.381014,-1.43187215 116.823879,-0.170695788 118,2 C121.959147,6.77808536 126,17.3439836 126,23 C126,26.9937684 125.076313,28.0709555 120,28 Z" id="path-9"></path>
    </defs>
    <g id="How-To-Use" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(-857.000000, -1136.000000)" id="Avataaar/Default">
            <g transform="translate(825.000000, 1100.000000)">
                <g id="Body" stroke-width="1" fill-rule="evenodd" transform="translate(32.000000, 36.000000)">
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <use fill="#D0C6AC" xlink:href="#path-1"></use>
                    <g id="Skin/👶🏽-03-Brown" mask="url(#mask-2)" fill="#D08B5B">
                        <g transform="translate(-32.000000, 0.000000)" id="Color">
                            <rect x="0" y="0" width="264" height="244"></rect>
                        </g>
                    </g>
                    <path d="M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z" id="Neck-Shadow" fill-opacity="0.100000001" fill="#000000" mask="url(#mask-2)"></path>
                </g>
                <g id="Clothing/Shirt-Scoop-Neck" transform="translate(0.000000, 170.000000)">
                    <mask id="mask-4" fill="white">
                        <use xlink:href="#path-3"></use>
                    </mask>
                    <use id="Clothes" fill="#E6E6E6" fill-rule="evenodd" xlink:href="#path-3"></use>
                    <g id="Color/Palette/Gray-01" mask="url(#mask-4)" fill-rule="evenodd" fill="#E6E6E6">
                        <rect id="🖍Color" x="0" y="0" width="264" height="110"></rect>
                    </g>
                </g>
                <g id="Face" stroke-width="1" fill-rule="evenodd" transform="translate(76.000000, 82.000000)" fill="#000000">
                    <g id="Mouth/Default" transform="translate(2.000000, 52.000000)" fill-opacity="0.699999988">
                        <path d="M40,15 C40,22.7319865 46.2680135,29 54,29 L54,29 C61.7319865,29 68,22.7319865 68,15" id="Mouth"></path>
                    </g>
                    <g id="Nose/Default" transform="translate(28.000000, 40.000000)" fill-opacity="0.16">
                        <path d="M16,8 C16,12.418278 21.372583,16 28,16 L28,16 C34.627417,16 40,12.418278 40,8" id="Nose"></path>
                    </g>
                    <g id="Eyes/Default-😀" transform="translate(0.000000, 8.000000)" fill-opacity="0.599999964">
                        <circle id="Eye" cx="30" cy="22" r="6"></circle>
                        <circle id="Eye" cx="82" cy="22" r="6"></circle>
                    </g>
                    <g id="Eyebrow/Outline/Default" fill-opacity="0.599999964">
                        <g id="I-Browse" transform="translate(12.000000, 6.000000)">
                            <path d="M3.63024536,11.1585767 C7.54515501,5.64986673 18.2779197,2.56083721 27.5230268,4.83118046 C28.5957248,5.0946055 29.6788665,4.43856013 29.9422916,3.36586212 C30.2057166,2.2931641 29.5496712,1.21002236 28.4769732,0.94659732 C17.7403633,-1.69001789 5.31209962,1.88699832 0.369754639,8.84142326 C-0.270109626,9.74178291 -0.0589363917,10.9903811 0.84142326,11.6302454 C1.74178291,12.2701096 2.9903811,12.0589364 3.63024536,11.1585767 Z" id="Eyebrow" fill-rule="nonzero"></path>
                            <path d="M61.6302454,11.1585767 C65.545155,5.64986673 76.2779197,2.56083721 85.5230268,4.83118046 C86.5957248,5.0946055 87.6788665,4.43856013 87.9422916,3.36586212 C88.2057166,2.2931641 87.5496712,1.21002236 86.4769732,0.94659732 C75.7403633,-1.69001789 63.3120996,1.88699832 58.3697546,8.84142326 C57.7298904,9.74178291 57.9410636,10.9903811 58.8414233,11.6302454 C59.7417829,12.2701096 60.9903811,12.0589364 61.6302454,11.1585767 Z" id="Eyebrow" fill-rule="nonzero" transform="translate(73.000154, 6.039198) scale(-1, 1) translate(-73.000154, -6.039198) "></path>
                        </g>
                    </g>
                </g>
                <g id="Top" stroke-width="1" fill-rule="evenodd">
                    <mask id="mask-6" fill="white">
                        <use xlink:href="#path-5"></use>
                    </mask>
                    <g id="Mask"></g>
                    <g id="Top/Short-Hair/Sides" mask="url(#mask-6)">
                        <g transform="translate(-1.000000, 0.000000)">
                            <g id="Facial-Hair/Beard-Magestic" transform="translate(49.000000, 72.000000)">
                                <mask id="mask-8" fill="white">
                                    <use xlink:href="#path-7"></use>
                                </mask>
                                <use id="Glorious-Beard" fill="#5E7AA9" fill-rule="evenodd" xlink:href="#path-7"></use>
                                <g id="Color/Hair/Black" mask="url(#mask-8)" fill-rule="evenodd" fill="#2C1B18">
                                    <rect id="Color" x="0" y="0" width="168" height="152"></rect>
                                </g>
                            </g>
                            <g id="Hair" stroke-width="1" fill-rule="evenodd" transform="translate(70.000000, 74.000000)">
                                <mask id="mask-10" fill="white">
                                    <use xlink:href="#path-9"></use>
                                </mask>
                                <use id="Sides" fill="#9E7A7A" xlink:href="#path-9"></use>
                                <g id="Color/Hair/Blonde" mask="url(#mask-10)" fill="#B58143">
                                    <g transform="translate(-69.000000, -74.000000)" id="Color">
                                        <rect x="0" y="0" width="264" height="280"></rect>
                                    </g>
                                </g>
                            </g>
                            <g id="Top/_Resources/Blank" transform="translate(62.000000, 85.000000)"></g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
<textarea id='output-text'></textarea>

</body>
</html>